﻿
function chartStatistics() {
    /**
    * Visualize an HTML table using Highcharts. The top (horizontal) header
    * is used for series names, and the left (vertical) header is used
    * for category names. This function is based on jQuery.
    * param {Object} table The reference to the HTML table to visualize
    * param {Object} options Highcharts options
    */
    Highcharts.visualize = function (table, options) {
        // the categories
        options.xAxis.categories = [];
        $('tbody th', table).each(function (i) {
            options.xAxis.categories.push(this.innerHTML);
        });

        // the data series
        m = 200
        costumColors = ["#46E600", "#E23625", "#373737"];
        var index = -1;
        options.series = [];
        $('tr', table).each(function (i) {
            var tr = this;
            $('th, td', tr).each(function (j) {
                if (j > 0) { // skip first column                    
                    if (i == 0) { // get the name and init the series                                                
                        options.series[j - 1] = {
                            name: this.innerHTML,
                            data: []
                        };

                    } else { // add values     
                        //generate different color depending on the number of bids
                        //numberOfBids = parseFloat(this.innerHTML)
                        //newR = parseInt((55 * Math.min(numberOfBids / m)) + 200);                        
                        //temp = { y: numberOfBids, color: "rgb(" + newR + ",54,37)" };
                        temp = { y: parseFloat(this.innerHTML), color: "#E23625" };
                        options.series[j - 1].data.push(temp);
                    }
                    index++;
                    if (index == 3) {
                        index = 0
                    }
                }
            });
        });

        var chart = new Highcharts.Chart(options);
    }

    var table = document.getElementById('datatable')
    var options;
    if ($(window).width() < 640) {
        options = {
            chart: {
                renderTo: 'container',
                type: 'bar' //bar
            },
            title: {
                text: ''
            },
            xAxis: {
                title: {
                    text: 'Bid times'
                }
            },
            yAxis: {
                title: {
                    text: 'Number of bids per time unit'
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        this.y + ' bids for ' + this.x.toLowerCase();
                }
            },
            exporting: {
                enabled: false
            }
        }; 
    }
    else {
        options = {
            chart: {
                renderTo: 'container',
                type: 'column' //bar
            },
            title: {
                text: ''
            },
            xAxis: {
                title: {
                    text: 'Bid times'
                }
            },
            yAxis: {
                title: {
                    text: 'Number of bids per time unit'
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        this.y + ' bids for ' + this.x.toLowerCase();
                }
            },
            exporting: {
                enabled: false
            }
        };    
    }
    
    Highcharts.theme = {
        colors: ["#cf1e1f", "#cf1e1f", "#47E700"],
        chart: {
            backgroundColor: 'none',
            plotBackgroundColor: 'none',
            borderWidth: 0,
            borderRadius: 15,
            plotBackgroundColor: null,
            plotShadow: false,
            plotBorderWidth: 0
        },
        title: {
            style: {
                color: '#FFF',
                font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
            }
        },
        subtitle: {
            style: {
                color: '#DDD',
                font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
            }
        },
        xAxis: {
            showEmpty: false,
            gridLineWidth: 0,
            lineColor: '#333',
            tickColor: '#333',
            labels: {
                style: {
                    color: '#333',
                    fontWeight: 'bold',
                    font: 'bold 12px Helvetica, sans-serif, Arial'
                }
            },
            title: {
                style: {
                    color: '#2F2F2F',
                    font: 'bold 14px Helvetica, sans-serif, Arial'
                }
            }
        },
        yAxis: {
            showEmpty : false,
            allowDecimals: false,
            alternateGridColor: null,
            minorTickInterval: null,
            gridLineColor: 'rgba(255, 255, 255, 1)',
            lineColor: '#333',
            lineWidth: 1,
            tickWidth: 0,
            labels: {
                style: {
                    color: '#333',
                    fontWeight: 'bold',
                    font: 'bold 12px Helvetica, sans-serif, Arial'
                }
            },
            title: {
                style: {
                    color: '#2F2F2F',
                    font: 'bold 14px Helvetica, sans-serif, Arial'
                }
            }
        },
        legend: {
            enabled : false,
            itemStyle: {
                color: '#CCC'
            },
            itemHoverStyle: {
                color: '#FFF'
            },
            itemHiddenStyle: {
                color: '#333'
            }
        },
        labels: {
            style: {
                color: '#CCC'
            }
        },
        tooltip: {
            backgroundColor: {
                linearGradient: [0, 0, 0, 50],
                stops: [
            [0, 'rgba(96, 96, 96, .8)'],
            [1, 'rgba(16, 16, 16, .8)']
         ]
            },
            borderWidth: 0,
            style: {
                color: '#FFF'
            }
        },


        plotOptions: {
            line: {
                dataLabels: {
                    color: '#CCC'
                },
                marker: {
                    lineColor: '#333'
                }
            },
            spline: {
                marker: {
                    lineColor: '#333'
                }
            },
            scatter: {
                marker: {
                    lineColor: '#333'
                }
            },
            candlestick: {
                lineColor: 'white'
            }
        },

        toolbar: {
            itemStyle: {
                color: '#CCC'
            }
        },

        navigation: {
            buttonOptions: {
                backgroundColor: {
                    linearGradient: [0, 0, 0, 20],
                    stops: [
               [0.4, '#606060'],
               [0.6, '#333333']
            ]
                },
                borderColor: '#000000',
                symbolStroke: '#C0C0C0',
                hoverSymbolStroke: '#FFFFFF'
            }
        },

        exporting: {
            buttons: {
                exportButton: {
                    symbolFill: '#55BE3B'
                },
                printButton: {
                    symbolFill: '#7797BE'
                }
            }
        },

        // scroll charts
        rangeSelector: {
            buttonTheme: {
                fill: {
                    linearGradient: [0, 0, 0, 20],
                    stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
                },
                stroke: '#000000',
                style: {
                    color: '#CCC',
                    fontWeight: 'bold'
                },
                states: {
                    hover: {
                        fill: {
                            linearGradient: [0, 0, 0, 20],
                            stops: [
                     [0.4, '#BBB'],
                     [0.6, '#888']
                  ]
                        },
                        stroke: '#000000',
                        style: {
                            color: 'white'
                        }
                    },
                    select: {
                        fill: {
                            linearGradient: [0, 0, 0, 20],
                            stops: [
                     [0.1, '#000'],
                     [0.3, '#333']
                  ]
                        },
                        stroke: '#000000',
                        style: {
                            color: 'yellow'
                        }
                    }
                }
            },
            inputStyle: {
                backgroundColor: '#333',
                color: 'silver'
            },
            labelStyle: {
                color: 'silver'
            }
        },

        navigator: {
            handles: {
                backgroundColor: '#666',
                borderColor: '#AAA'
            },
            outlineColor: '#CCC',
            maskFill: 'rgba(16, 16, 16, 0.5)',
            series: {
                color: '#7798BF',
                lineColor: '#A6C7ED'
            }
        },

        scrollbar: {
            barBackgroundColor: {
                linearGradient: [0, 0, 0, 20],
                stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
            },
            barBorderColor: '#CCC',
            buttonArrowColor: '#CCC',
            buttonBackgroundColor: {
                linearGradient: [0, 0, 0, 20],
                stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
            },
            buttonBorderColor: '#CCC',
            rifleColor: '#FFF',
            trackBackgroundColor: {
                linearGradient: [0, 0, 0, 10],
                stops: [
            [0, '#000'],
            [1, '#333']
         ]
            },
            trackBorderColor: '#666'
        },

        // special colors for some of the demo examples
        legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
        legendBackgroundColorSolid: 'rgb(70, 70, 70)',
        dataLabelsColor: '#444',
        textColor: '#E0E0E0',
        maskColor: 'rgba(255,255,255,0.3)'
    };

    // Apply the theme
    Highcharts.setOptions(Highcharts.theme);
    Highcharts.visualize(table, options);
}


function chartStatistics_Average() {
    /**
    * Visualize an HTML table using Highcharts. The top (horizontal) header
    * is used for series names, and the left (vertical) header is used
    * for category names. This function is based on jQuery.
    * param {Object} table The reference to the HTML table to visualize
    * param {Object} options Highcharts options
    */
    Highcharts.visualize = function (table, options) {
        // the categories
        options.xAxis.categories = [];
        $('tbody th', table).each(function (i) {
            options.xAxis.categories.push(this.innerHTML);
        });

        // the data series
        costumColors = ["#46E600", "#E23625", "#373737"];
        var index = -1;
        options.series = [];
        $('tr', table).each(function (i) {
            var tr = this;
            $('th, td', tr).each(function (j) {
                if (j > 0) { // skip first column                    
                    if (i == 0) { // get the name and init the series                                                
                        options.series[j - 1] = {
                            name: this.innerHTML,
                            data: []
                        };

                    } else { // add values            
                        temp = { y: parseFloat(this.innerHTML), color: "#E23625" };
                        options.series[j - 1].data.push(temp);
                    }
                    index++;
                    if (index == 3) {
                        index = 0
                    }
                }
            });
        });

        var chart = new Highcharts.Chart(options);
    }

    var table = document.getElementById('datatableaverage')
    var options;
    if ($(window).width() < 640) {
        options = {
            chart: {
                renderTo: 'containeraverage',
                type: 'bar' //bar
            },
            title: {
                text: ''
            },
            xAxis: {
            },
            yAxis: {
                title: {
                    text: 'Number of bids per time unit'
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' + 
                        "$" + this.y + ' for ' + this.x.toLowerCase();
                }
            },
            exporting: {
                enabled: false
            }
        };
    }
    else {
        options = {
            chart: {
                renderTo: 'containeraverage',
                type: 'column' //bar
            },
            title: {
                text: ''
            },
            xAxis: {
                title: {
                    text: 'Days'
                }
            },
            yAxis: {
                title: {
                    text: 'Bidding amount'
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        "$" + this.y + ' for ' + this.x.toLowerCase();
                }
            },
            exporting: {
                enabled: false
            }
        };
    }

    Highcharts.theme = {
        colors: ["#cf1e1f", "#cf1e1f", "#47E700"],
        chart: {
            backgroundColor: 'none',
            plotBackgroundColor: 'none',
            borderWidth: 0,
            borderRadius: 15,
            plotBackgroundColor: null,
            plotShadow: false,
            plotBorderWidth: 0
        },
        title: {
            style: {
                color: '#FFF',
                font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
            }
        },
        subtitle: {
            style: {
                color: '#DDD',
                font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
            }
        },
        xAxis: {
            showEmpty: false,
            gridLineWidth: 0,
            lineColor: '#333',
            tickColor: '#333',
            labels: {
                style: {
                    color: '#333',
                    fontWeight: 'bold',
                    font: 'bold 12px Helvetica, sans-serif, Arial'
                }
            },
            title: {
                style: {
                    color: '#2F2F2F',
                    font: 'bold 14px Helvetica, sans-serif, Arial'
                }
            }
        },
        yAxis: {
            showEmpty: false,
            allowDecimals: false,
            alternateGridColor: null,
            minorTickInterval: null,
            gridLineColor: 'rgba(255, 255, 255, 1)',
            lineColor: '#333',
            lineWidth: 1,
            tickWidth: 0,
            labels: {
                style: {
                    color: '#333',
                    fontWeight: 'bold',
                    font: 'bold 12px Helvetica, sans-serif, Arial'
                }
            },
            title: {
                style: {
                    color: '#2F2F2F',
                    font: 'bold 14px Helvetica, sans-serif, Arial'
                }
            }
        },
        legend: {
            enabled: false,
            itemStyle: {
                color: '#CCC'
            },
            itemHoverStyle: {
                color: '#FFF'
            },
            itemHiddenStyle: {
                color: '#333'
            }
        },
        labels: {
            style: {
                color: '#CCC'
            }
        },
        tooltip: {
            backgroundColor: {
                linearGradient: [0, 0, 0, 50],
                stops: [
            [0, 'rgba(96, 96, 96, .8)'],
            [1, 'rgba(16, 16, 16, .8)']
         ]
            },
            borderWidth: 0,
            style: {
                color: '#FFF'
            }
        },


        plotOptions: {
            line: {
                dataLabels: {
                    color: '#CCC'
                },
                marker: {
                    lineColor: '#333'
                }
            },
            spline: {
                marker: {
                    lineColor: '#333'
                }
            },
            scatter: {
                marker: {
                    lineColor: '#333'
                }
            },
            candlestick: {
                lineColor: 'white'
            }
        },

        toolbar: {
            itemStyle: {
                color: '#CCC'
            }
        },

        navigation: {
            buttonOptions: {
                backgroundColor: {
                    linearGradient: [0, 0, 0, 20],
                    stops: [
               [0.4, '#606060'],
               [0.6, '#333333']
            ]
                },
                borderColor: '#000000',
                symbolStroke: '#C0C0C0',
                hoverSymbolStroke: '#FFFFFF'
            }
        },

        exporting: {
            buttons: {
                exportButton: {
                    symbolFill: '#55BE3B'
                },
                printButton: {
                    symbolFill: '#7797BE'
                }
            }
        },

        // scroll charts
        rangeSelector: {
            buttonTheme: {
                fill: {
                    linearGradient: [0, 0, 0, 20],
                    stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
                },
                stroke: '#000000',
                style: {
                    color: '#CCC',
                    fontWeight: 'bold'
                },
                states: {
                    hover: {
                        fill: {
                            linearGradient: [0, 0, 0, 20],
                            stops: [
                     [0.4, '#BBB'],
                     [0.6, '#888']
                  ]
                        },
                        stroke: '#000000',
                        style: {
                            color: 'white'
                        }
                    },
                    select: {
                        fill: {
                            linearGradient: [0, 0, 0, 20],
                            stops: [
                     [0.1, '#000'],
                     [0.3, '#333']
                  ]
                        },
                        stroke: '#000000',
                        style: {
                            color: 'yellow'
                        }
                    }
                }
            },
            inputStyle: {
                backgroundColor: '#333',
                color: 'silver'
            },
            labelStyle: {
                color: 'silver'
            }
        },

        navigator: {
            handles: {
                backgroundColor: '#666',
                borderColor: '#AAA'
            },
            outlineColor: '#CCC',
            maskFill: 'rgba(16, 16, 16, 0.5)',
            series: {
                color: '#7798BF',
                lineColor: '#A6C7ED'
            }
        },

        scrollbar: {
            barBackgroundColor: {
                linearGradient: [0, 0, 0, 20],
                stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
            },
            barBorderColor: '#CCC',
            buttonArrowColor: '#CCC',
            buttonBackgroundColor: {
                linearGradient: [0, 0, 0, 20],
                stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
            },
            buttonBorderColor: '#CCC',
            rifleColor: '#FFF',
            trackBackgroundColor: {
                linearGradient: [0, 0, 0, 10],
                stops: [
            [0, '#000'],
            [1, '#333']
         ]
            },
            trackBorderColor: '#666'
        },

        // special colors for some of the demo examples
        legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
        legendBackgroundColorSolid: 'rgb(70, 70, 70)',
        dataLabelsColor: '#444',
        textColor: '#E0E0E0',
        maskColor: 'rgba(255,255,255,0.3)'
    };

    // Apply the theme
    Highcharts.setOptions(Highcharts.theme);
    Highcharts.visualize(table, options);
}